<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="utf-8">
	<title>HomePage demo</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
<!-- 	<style type="text/css">

	#go-top{
		position: fixed;
		bottom: 10px;
		right: 0;
		width: 200px;
		line-height: 30px;
		background: red;
		border: 1px solid blue;
		display: none;
	}
	</style> -->
</head>
<body>
	<!-- 导航条nav -->
	<div id="nav">
		<div class="highlight">
		    <img src="./img/logo-min.png">
			<span class="text">新世界</span>
		</div>
		<div class="menu">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">最新活动</a></li>
			<li><a href="#">项目介绍</a></li>
			<li><a href="#">爱心社区</a></li>
			<li><a href="#">联系我们</a></li>
		</div>
		<i class="avatar"><img src="./img/avatar.png"></i>
		<span class="login">登陆</span>
	</div>

	
	<div id="header">
		<div class="content">
			<h1>Time of New Life</h1>
			<p>新的时代, 年轻的人们让我们一起</p>
            <p>体验新生活, 享受新生活</p>           
		</div>
		<div class="button">
			<a href="#">开始体验</a>
		</div>
	</div>

	<div id="sologan">
		<div class="col-3">
			<div class="sologan-img"><img src="./img/sologan1.png"></div>
			<div class="content">
				<p>打造全新世界观, 让你更</p>
            	<p>爱你的生活</p>
			</div>
		</div>
		<div class="col-3">
			<div class="sologan-img"><img src="./img/sologan2.png"></div>
			<div class="content">
          		<p>丰富多彩的公益活动，发</p>
          		<p>挥新世界的主人公意识</p>
		    </div>
		</div>
		<div class="col-3">
			<div class="sologan-img"><img src="./img/sologan3.png"></div>
			<div class="content">
          		<p>时间的新理念,超前体验</p>
            	<p>未知的生活</p>
		    </div>
		</div>
		<div class="col-3">
			<div class="sologan-img"><img src="./img/sologan4.png"></div>
			<div class="content end">
          		<p>完善的培养机制培养你</p>
          		<p>全新的世界观</p>
		    </div>
		</div>
	</div>

	<div id="logo">
		<div class="logo-img">
			<img src="./img/logo.png" alt="logo">
		</div>
		<div class="logo-text">
			<p>关于新世界，你不知道的还有什么？</p>
		</div>
	</div>

	<div id="search">
		<div class="title">
			<h2>查找新世界城市活动信息</h2>
			<p>每个城市有不同的活动信息，请自主查询您所需要了解的城市</p>
		</div>	
		<div class="select">
			<select class="selectbox">
				<option>国家</option>
				<option>中国</option>
				<option>美国</option>
			</select>
			<select class="selectbox" placeholder="省份">
				<option>省份</option>
				<option>北京市</option>
				<option>天津市</option>
				<option>河北省</option>
				<option>内蒙古自治区</option>
			</select>
			<select class="selectbox" placeholder="城市">
				<option>城市</option>
				<option>武汉市</option>
				<option>长沙市</option>
				<option>深圳</option>
				<option>西安</option>
				<option>呼尔浩特</option>
			</select>
			<button class="button">搜&nbsp;&nbsp;索</button>
		</div>
	</div>

	<div id="activity">
		<div class="col-3">
			<div class="show-img"><img src="./img/f1.png"></div>
			<div class="show-info">
				<h3>北京活动</h3>
				<p>新社区大联盟</p>
			</div>
		</div>
		<div class="col-3">
			<div class="show-info">
				<h3>上&nbsp;&nbsp;&nbsp;海&nbsp;&nbsp;&nbsp;活&nbsp;&nbsp;&nbsp;动</h3>
				<p>夜上海新视觉探索</p>
			</div>
			<div class="show-img"><img src="./img/f2.png"></div>
		</div>
		<div class="col-3">
			<div class="show-img"><img src="./img/f3.png"></div>
			<div class="show-info">
				<h3>深圳活动</h3>
				<p>全新海岸线观点站</p>
			</div>
		</div>
		<div class="col-3">
			<div class="show-img"><img src="./img/f4.png"></div>
			<div class="show-info">
				<h3>香港活动</h3>
				<p>奢侈消费大派送</p>
			</div>
		</div>
	</div>

	<div id="fifth">
		<div class="new-img">
		</div>
		<div class="content">
			<p>新世界/01</p>
			<p>新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
			<p>新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
			<p>新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
			<div>
				<p class="detail">更多详情</p>
			</div>
		</div>
	</div>

	<div id="life">
		<div class="part1">
			<div class="sologan">
				<p>新时代</p>
			    <p>关于热爱生活的我们</p>
			    <p class="detail-1 ">查看更多</p>
			</div>
		</div>

		<div class="part2">
			<div class="sologan">
				<p>新时代</p>
			    <p>关于热爱生活的我们</p>
			    <p class="detail-2">查看更多</p>
			</div>
		</div>

		<div class="part3"></div>

	</div>

	<div id="join">
		<div class="title">
			<h2>成为我们的志愿者</h2>
			<p>新世界的大家庭需要每一个爱生活的人的加入, 如果你够年轻, 有梦想，有激情</p>
			<p>那就不要犹豫, 快来加入我们, 成为改变所有人生活的人</p>
		</div>

		<div class="sign">
			<div class="sign-detail">
				<div class="col-4">
					<h3>新世界志愿者协议</h3>
					<p>新世界志愿者协议新世界志愿者协议新世界志愿者协议</p>
				</div>

				<div class="col-4">
					<h3>新世界志愿者权利</h3>
					<p>新世界志愿者协议新世界志愿者协议新世界志愿者协议</p>
				</div>

				<div class="col-4">
					<h3>更多条款</h3>
				</div>
			</div>
			<div class="sign-form">
				<input type="text" class="name" placeholder="姓名："></input>
				<input type="text" class="age" placeholder="年龄："></input><br>
				<input type="text" class="tel" placeholder="联系方式："></input>
				<input type="text"  class="addr" placeholder="联系地址："></input>
				<input type="text" class="textarea" placeholder="请描述你梦想的生活"></input>
				<input type="button"  class="btn" value="提交申请"></input>
			</div>
		</div>
	</div>

	<div id="contact">
		<div class="info">		
			<h3>联系我们</h3>
			<p>
               为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯
            </p>
		</div>	
		<div class="form">
			<input  class="email" style="text" placeholder="xxx@email.com"></input>
			<span class="button">提&nbsp;交</span>
		</div>

	</div>

	<div id="footer">
		<span class="copyright">@2016新世界</span>
		<span class="index">back to Top</span>
	</div>

	<script src = "http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
	<!-- <script type="text/javascript" scr= "js/gotop.js" defer></script> -->
	<!-- <script type="text/javascript" src="js/stickup.js" defer></script> -->
</body>
</html>